<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" name="viewport"
    content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no">
  <title>星空生态│让每个星空生态参与者成为IPFS红利获得者</title>
  <link rel="shortcut icon" href="wangzhiLogo.png">
  <link rel="stylesheet" type="text/css" href="index.css">
  <script src="js/video-js/js/video.min.js"></script>
  <link rel="stylesheet" href="js/video-js/css/video-js.css">
  <link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
  <link rel="stylesheet" href="phone.css" type="text/css">
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
  <script src="./js/vue.min.js"></script>
  <style>
    .fengfeng {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="fengfeng" id="fengfeng">
    <div class="wrapp" id="wrapp">
      <div class="head">
        <div class="head_1" id="Home" ref="Home">
          <img src="./img/lalala.png" alt="" class="logoImg">
          <img src="./img/Rectangle.png" alt="" class="lineGreen">
          <img src="./img/banner.jpg" alt="" class="top_1Img">
          <div class="title">
            <span>让每个星空生态参与者 成为IPFS红利获得</span>
            <div class="line_1"></div>
          </div>
        </div>
        <div class="head_2" id="titleXinkong" ref="titleXinkong">
          <img src="./img/banner_2.jpg" alt="" class="top_1Img">
          <div class="titleXinkong" :class="{animated:xiongKongisAction,fadeInUp:xiongKongisAction}">
            <span>星空生态</span>
            <div class="line_2"></div>
          </div>
          <div class="xingkongIntrolduce" :class="{animated:xiongKongisAction_1,fadeInUp:xiongKongisAction_1}">
            星空生态成立于2018年5月，核心成员毕业于上海交通大学、同济大学等知名高校，曾任职百度、埃森哲、Google、银联、Intel等500强企业，在大数据、AI算法、服务器研发领域拥有15年以上经验。星空生态发挥核心技术优势，将软件算法和硬件研发相结合，打造一套“高效率、高收益、低门槛、低风险”的Filecoin存储挖矿系统。
          </div>
          <div class="xingkongItemBox" :class="{animated:xiongKongisAction_2,fadeInUp:xiongKongisAction_2}">
            <div class="xingkongItem" @mouseenter="enter(index)" @mouseleave="leave(index)"
              v-for="(item,index) in xingkongBoxList" :key="index">
              <img :src="item.img" alt="" class="xingkongItemImg">
              <div class="xingkongInfo">
                {{item.content}}
              </div>
              <div class="xingkongItemFoot">
                <span class="xingkongItemFootWord">{{item.title}}</span>
                <div class="lineBlue" v-if="item.isShow"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tuoGuan">
        <div class="tuoGuanBanner" id="kuangji" ref="kuangji">
          <img src="./img/bg.png" alt="" class="tuoGuanBannerImg">
          <div class="tuoGuanBannerTitle" :class="{animated:kuangjiisAction,fadeInUp:kuangjiisAction}">
            <span>星空矿机与托管</span>
            <div class="line_1"></div>
          </div>
          <div class="tuoGuanBannerContent" :class="{animated:kuangjiisAction_1,fadeInUp:kuangjiisAction_1}">
            <img src="./img/title矿机.png" alt="" class="tuoGuanBannerContentImg_1">
            <img src="./img/suanfa.png" alt="" class="tuoGuanBannerContentImg_2">
          </div>
          <div style="clear: both"></div>
          <div class="tuoGuanBannerContent_1" :class="{animated:kuangjiisAction_2,fadeInUp:kuangjiisAction_2}">
            <img src="./img/wuxingji.png" alt="" class="tuoGuanBannerContentImg_3 ">
            <img src="./img/title矿场.png" alt="" class="tuoGuanBannerContentImg_4">
          </div>
          <div class="tuoGuanBannerContent" :class="{animated:kuangjiisAction_3,fadeInUp:kuangjiisAction_3}">
            <img src="./img/title算法.png" alt="" class="tuoGuanBannerContentImg_1">
            <img src="./img/kuangji.png" alt="" class="tuoGuanBannerContentImg_2">
          </div>
        </div>
      </div>
      <!-- <div class="power">
            <div class="powerContent" id="power" ref="power">
                <img src="./img/bg.png" alt="" class="tuoGuanBannerImg">
                <div class="powerTitle" :class="{animated:powerisAction,fadeInUp:powerisAction}">
                    <span>星空云算力</span>
                    <div class="line_1"></div>
                </div>
                <div class="powerItemBox" :class="{animated:powerisAction_1,fadeInUp:powerisAction_1}">
                    <img src="./img/mian.png" alt="" class="powerItemBoxImg_3">
                    <img src="./img/wen.png" alt="" class="powerItemBoxImg_4">
                    <img src="./img/di.png" alt="" class="powerItemBoxImg_5">
                </div>
            </div>
        </div> -->
      <div class="IPFS">
        <div class="IPFSContent" id="IPFS" ref="IPFS">
          <div class="powerTitle" :class="{animated:IPFSisAction,fadeInUp:IPFSisAction}">
            <span>IPFS官方简介</span>
            <div class="line_1"></div>
          </div>
        </div>
        <div class="IPFSBox" :class="{animated:IPFSisAction_1,fadeInUp:IPFSisAction_1}">
          <video id="media" class="video-js vjs-default-skin" controls vertica="true" preload="none" data-setup="{}">
            <source src="http://xk-huadong1.oss-cn-hangzhou.aliyuncs.com/public/media/xk_001.mp4" type='video/mp4'>
            <source src="http://xk-huadong1.oss-cn-hangzhou.aliyuncs.com/public/media/xk_001.mp4" type="video/ogg">
          </video>
        </div>
        <img src="./img/Group_16.png" alt="" class="IPFSImg_17">
        <img src="./img/Group_17.png" alt="" class="IPFSImg_16">
      </div>
      <div class="contraUs">
        <div class="contraUsContent" :class="{animated:usisAction,fadeInUp:usisAction}" id="us" ref="us">
          <div class="contraUsItemTitle">
            <span>联系我们</span>
            <div class="line_1"></div>
          </div>
          <div class="contraUsItemBox" :class="{animated:usisAction,fadeInUp:usisAction}">
            <div class="qcode">
              <img src="./img/qcode.png" alt="">
              <span>星空生态小程序</span>
            </div>
            <div class="shuline"></div>
            <div class="contraUsRight">
              <div class="contraUsRightItem">
                <img src="./img/icon_电话.png" alt="">
                <span>18501659579</span>
              </div>
              <div class="contraUsRightItem">
                <img src="./img/icon_邮箱.png" alt="">
                <span>support@tianrukj.com</span>
              </div>
              <div class="contraUsRightItem">
                <img src="./img/icon_网址.png" alt="">
                <span>https://skyipfs.com</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="menu_1">
        <img :src="menuImgAction_new" alt="" class="homeImg" @click="mao('Home',0)" @mouseenter="enterHome"
          @mouseleave="leaveHome">
        <div class="menuItem" @click="mao('titleXinkong',5)" :class="{actionMenuItem:xiongKongisAction_new}">星空生态
        </div>
        <div class="menuItem" @click="mao('kuangji',1)" :class="{actionMenuItem:kuangjiisAction_new}">星空矿机
        </div>
        <!-- <div class="menuItem" @click="mao('power',2)" :class="{actionMenuItem:powerisAction_new}">
          云算力
        </div> -->
        <div class="menuItem action" @click="mao('IPFS',3)" :class="{actionMenuItem:IPFSisAction_new}">IPFS官方
        </div>
        <div class="menuItem" @click="mao('us',4)" :class="{actionMenuItem:usisAction_new}">联系我们
        </div>
      </div>
    </div>
    <div class="phoneWrapp" id="HomePhone" ref="HomePhone">
      <div class="phoneMenu">
        <img src="./img/lalala.png" alt="" class="phoneLogo">
        <img src="./img/icon_菜单@2x.png" alt="" class="caidan" @click="open">
      </div>
      <div class="phoneHead">
        <img src="./img/banner.jpg" alt="" class="topPhone_1Img">
        <div class="phoneHeadInfo">
          <span class="phoneHeadTitle">让每个星空生态参与者 成为IPFS红利获得者</span>
          <div class="phoneLine"></div>
        </div>
      </div>
      <div class="phoneST" id="shengtaiPhone" ref="shengtaiPhone">
        <img src="./img/banner_2.jpg" alt="" class="topPhone_2Img" style="top:0px">
        <div class="box">
          <div class="phoneInfoCom">
            <span class="phoneTitleCom">星空生态</span>
            <div class="comLine"></div>
          </div>
          <div class="phoneItemDescibe">
            星空生态成立于2018年5月，核心成员毕业于上海交通大学、同济大学等知名高校，曾任职百度、埃森哲、Google、银联、Intel等500强企业，在大数据、AI算法、服务器研发领域拥有15年以上经验。星空生态发挥核心技术优势，将软件算法和硬件研发相结合，打造一套“高效率、高收益、低门槛、低风险”的Filecoin存储挖矿系统
          </div>
          <div class="phoneItemDescibeBox">
            <div class="phoneItemDescibeBoxItem">
              <img src="./img/icon核心技术.png" alt="" class="phoneItemDescibeBoxItemImg">
              <div class="phoneItemDescibeBoxItemContent">
                多次迭代的自主研发挖矿系统，从网络架构、通信模块、软件算法、控制系统等多个维度提升挖矿效率
              </div>
              <div class="phoneItemDescibeBoxItemTitle">核心技术优势</div>
            </div>
            <div class="phoneItemDescibeBoxItem">
              <img src="./img/icon供应链.png" alt="" class="phoneItemDescibeBoxItemImg">
              <div class="phoneItemDescibeBoxItemContent">
                超过两家供应商为我方提供优质服务器，并与希捷定制开发专用矿机，打造具有领先优势的硬件设备
              </div>
              <div class="phoneItemDescibeBoxItemTitle">健全的供应链</div>
            </div>
            <div class="phoneItemDescibeBoxItem animated" style="margin-bottom: 0"
              :class="{fadeInUp:xiongKongisAction_newPhoneID}">
              <img src="./img/icon矿场安全.png" alt="" class="phoneItemDescibeBoxItemImg">
              <div class="phoneItemDescibeBoxItemContent">
                所有矿机均托管于标准IDC机房，稳定的网络和电力确保矿机高效挖矿。
              </div>
              <div class="phoneItemDescibeBoxItemTitle">矿场安全可靠</div>
            </div>
            <div class="phoneItemDescibeBoxItem animated" style="margin-bottom: 0"
              :class="{fadeInUp:xiongKongisAction_newPhoneID}">
              <img src="./img/icon团队.png" alt="" class="phoneItemDescibeBoxItemImg">
              <div class="phoneItemDescibeBoxItemContent">
                核心团队均名校毕业，在硬件、软件、算法、运维、风控等领域拥有丰富经验。
              </div>
              <div class="phoneItemDescibeBoxItemTitle">专业运营团队</div>
            </div>
          </div>
        </div>
      </div>
      <div class="phoneTG" id="kuangjiPhone" ref="kuangjiPhone">
        <img src="./img/bg.png" alt="" class="topPhone_2Img">
        <div class="box">
          <div class="phoneInfoCom">
            <span class="phoneTitleCom animated" :class="{fadeInUp:kuangjiisAction_newPhoneID}" id="hehe">星空矿机与托管</span>
            <div class="comLine"></div>
          </div>
          <div class="phoneTGItemDescibeBox">
            <div class="phoneTGItemDescibeBoxItem animated" :class="{fadeInUp:powerisAction_newPhoneID}">
              <img src="./img/title矿机.png" alt="" class="phoneTGItemDescibeBoxItemImg">
              <img src="./img/suanfa.png" alt="" class="phoneTGItemDescibeBoxItemImg_1">
            </div>
            <div class="phoneTGItemDescibeBoxItem animated" :class="{fadeInUp:powerisAction_newPhoneID_1}">
              <img src="./img/title矿场.png" alt="" class="phoneTGItemDescibeBoxItemImg">
              <img src="./img/wuxingji.png" alt="" class="phoneTGItemDescibeBoxItemImg_1">
            </div>
            <div class="phoneTGItemDescibeBoxItem animated" :class="{fadeInUp:powerisAction_newPhoneID_2}">
              <img src="./img/title算法.png" alt="" class="phoneTGItemDescibeBoxItemImg">
              <img src="./img/kuangji.png" alt="" class="phoneTGItemDescibeBoxItemImg_1">
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="phonePower" id="powerPhone" ref="powerPhone">
        <img src="./img/bg.png" alt="" class="topPhone_2Img">
        <div class="box">
          <div class="phoneInfoCom animated" :class="{fadeInUp:powerisAction_newPhoneID_3}">
            <span class="phoneTitleCom">星空云算力</span>
            <div class="comLine"></div>
          </div>
          <div class="phonePowerItemDescibeBox">
            <img src="./img/mian.png" alt="" class="phonePowerItemDescibeBoxItem animated"
              :class="{fadeInUp:powerisAction_newPhoneID_3}">
            <img src="./img/wen.png" alt="" class="phonePowerItemDescibeBoxItem animated"
              :class="{fadeInUp:powerisAction_newPhoneID_4}">
            <img src="./img/di.png" alt="" class="phonePowerItemDescibeBoxItem animated"
              :class="{fadeInUp:powerisAction_newPhoneID_5}">
          </div>
        </div>
      </div> -->
      <div class="phoneIPFS" id="IPFSPhone" ref="IPFSPhone">
        <img src="./img/bg.png" alt="" class="topPhone_2Img">
        <img src="./img/bg.png" alt="" class="topPhone_2Img">
        <div class="box">
          <div class="phoneInfoCom animated" :class="{fadeInUp:IPFSisAction_newPhoneID}">
            <span class="phoneTitleCom">IPFS官方简介</span>
            <div class="comLine"></div>
          </div>
          <div class="phoneIFPSItemDescibeBox animated" :class="{fadeInUp:IPFSisAction_newPhoneID_1}">
            <video id="phoneMedia" class="video-js vjs-default-skin" controls vertica="true" preload="none"
              data-setup="{}">
              <source src="http://xk-huadong1.oss-cn-hangzhou.aliyuncs.com/public/media/xk_001.mp4" type='video/mp4'>
              <source src="http://xk-huadong1.oss-cn-hangzhou.aliyuncs.com/public/media/xk_001.mp4" type="video/ogg">
            </video>
          </div>
        </div>
      </div>
      <div class="phoneUS" id="usPhone" ref="usPhone">
        <div class="box">
          <div class="phoneInfoCom animated" :class="{fadeInUp:usisAction_newPhoneID}">
            <span class="phoneTitleCom">联系我们</span>
            <div class="comLine"></div>
          </div>
          <div class="phoneUStemDescibeBox animated" :class="{fadeInUp:usisAction_newPhoneID_1}">
            <div class="qcodeBox">
              <img src="./img/qcode.png" alt="" class="phoneQcode">
              <span>星空生态小程序</span>
            </div>
            <div class="fangshi animated" :class="{fadeInUp:usisAction_newPhoneID_2}">
              <div class="fangshiITem">
                <img src="./img/icon_电话.png" alt="" class="usFangshi">
                <span class="usFangshiWord">18501659579</span>
              </div>
              <div class="fangshiITem">
                <img src="./img/icon_邮箱.png" alt="" class="usFangshi">
                <span class="usFangshiWord">support@tianrukj.com</span>
              </div>
              <div class="fangshiITem">
                <img src="./img/icon_网址.png" alt="" class="usFangshi">
                <span class="usFangshiWord">https://skyipfs.com</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="daohangBox" v-if="isPhoneDaoHang"
        :class="{animated:phoneDaoHangAll,bounceOutRight:phoneDaoHang,bounceInRight:phoneDaoHangShow}">
        <img src="./img/icon_关闭@2x.png" alt="" class="close" @click="close">
        <img src="./img/icon_主页.png" alt="" class="phonehomeImg" @click="maoPhone('HomePhone',0)"
          v-if="phoneHomeSHow" />
        <img src="./img/greenHome.png" alt="" class="phonehomeImg" v-else />
        <div class="phonemenuImg" @click="maoPhone('shengtaiPhone',5)"
          :class="{actionMenuItem:xiongKongisAction_newPhone}">星空生态</div>
        <div class="phonemenuImg" @click="maoPhone('kuangjiPhone',1)"
          :class="{actionMenuItem:kuangjiisAction_newPhone}">星空矿机</div>
        <!-- <div class="phonemenuImg" @click="maoPhone('powerPhone',2)" :class="{actionMenuItem:powerisAction_newPhone}">云算力
        </div> -->
        <div class="phonemenuImg" @click="maoPhone('IPFSPhone',3)" :class="{actionMenuItem:IPFSisAction_newPhone}">
          IPFS官方</div>
        <div class="phonemenuImg action" @click="maoPhone('usPhone',4)" :class="{actionMenuItem:usisAction_newPhone}">
          联系我们</div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    let vm = new Vue({
      el: '#fengfeng',
      data: {
        isPhoneDaoHang: false,
        phoneDaoHangAll: false,
        phoneDaoHangShow: false,
        phoneDaoHang: false,
        phoneHomeSHow: false,
        xingkongBoxList: [
          {
            img: "./img/icon核心技术.png",
            content: "多次迭代的自主研发挖矿系统，从网络架构、通信模块、软件算法、控制系统等多个维度提升挖矿效率",
            title: "核心技术优势",
            isShow: false
          },
          {
            img: "./img/icon供应链.png",
            content: "超过两家供应商为我方提供优质服务器，并与希捷定制开发专用矿机，打造具有领先优势的硬件设备",
            title: "健全的供应链",
            isShow: false
          },
          {
            img: "./img/icon矿场安全.png",
            content: "所有矿机均托管于标准IDC机房，稳定的网络和电力确保矿机高效挖矿",
            title: "矿场安全可靠",
            isShow: false
          },
          {
            img: "./img/icon团队.png",
            content: "核心团队均名校毕业，在硬件、软件、算法、运维、风控等领域拥有丰富经验",
            title: "专业运营团队",
            isShow: false
          },
        ],
        IsanimationImg_1: false,
        xiongKongisAction: false,
        xiongKongisAction_1: false,
        xiongKongisAction_2: false,
        kuangjiisAction: false,
        kuangjiisAction_1: false,
        kuangjiisAction_2: false,
        kuangjiisAction_3: false,
        powerisAction: false,
        powerisAction_1: false,
        IPFSisAction: false,
        usisAction: false,
        menuImgAction: false,
        height: 0,
        IPFSisAction_1: false,
        xiongKongisAction_new: false,
        kuangjiisAction_new: false,
        powerisAction_new: false,
        IPFSisAction_new: false,
        usisAction_new: false,
        menuImgAction_new: "./img/greenHome.png",
        xiongKongisAction_newPhone: false,
        kuangjiisAction_newPhone: false,
        powerisAction_newPhone: false,
        IPFSisAction_newPhone: false,
        usisAction_newPhone: false,
        xiongKongisAction_newPhoneID: false,
        kuangjiisAction_newPhoneID: false,
        powerisAction_newPhoneID: false,
        powerisAction_newPhoneID_1: false,
        powerisAction_newPhoneID_2: false,
        powerisAction_newPhoneID_3: false,
        IPFSisAction_newPhoneID: false,
        IPFSisAction_newPhoneID_1: false,
        usisAction_newPhoneID: false,
        usisAction_newPhoneID_1: false,
        usisAction_newPhoneID_2: false,
        powerisAction_newPhoneID_4: false,
        powerisAction_newPhoneID_5: false,
        powerisAction_newPhoneID_6: false,
      },
      methods: {
        open: function () {
          this.isPhoneDaoHang = true;
          this.phoneDaoHangAll = true;
          this.phoneDaoHangShow = true;
          this.phoneDaoHang = false;
        },
        close: function () {
          // this.phoneDaoHang = false;
          // this.isPhoneDaoHang = true;
          this.phoneDaoHangAll = true;
          this.phoneDaoHangShow = false;
          this.phoneDaoHang = true;
        },
        enter: function (index) {
          this.xingkongBoxList[index].isShow = true;
        },
        leave: function (index) {
          this.xingkongBoxList[index].isShow = false;
        },
        enterHome: function () {
          this.menuImgAction_new = "./img/greenHome.png";
        },
        leaveHome: function () {
          this.menuImgAction_new = "./img/icon_主页.png";
        },
        mao: function (searchUserName, type) {
          let section = document.getElementById(searchUserName);
          let idName = null;
          if (type === 1) {
            idName = this.$refs.kuangji.id;
          } else if (type === 2) {
            idName = this.$refs.power.id;
          } else if (type === 3) {
            idName = this.$refs.IPFS.id;
          } else if (type === 4) {
            idName = this.$refs.us.id;
          } else if (type === 5) {
            idName = this.$refs.titleXinkong.id;
          } else if (type === 0) {
            idName = this.$refs.Home.id;
          }
          console.log(idName)
          if (idName === 'titleXinkong') {
            this.reset();
            this.xiongKongisAction_new = true;
          } else if (idName === "kuangji") {
            this.reset();
            this.kuangjiisAction_new = true;
          } else if (idName === "power") {
            this.reset();
            this.powerisAction_new = true;
          } else if (idName === "IPFS") {
            this.reset();
            this.IPFSisAction_new = true;
          } else if (idName === "us") {
            this.reset();
            this.usisAction_new = true;
          } else if (idName === "Home") {
            this.reset();
            this.menuImgAction_new = "./img/greenHome.png";
          }
          if (section) {
            section.scrollIntoView({
              behavior: "smooth",
              block: "start",
            })
          }
        },
        maoPhone: function (searchUserName, type) {
          let section = document.getElementById(searchUserName);
          let idName = null;
          if (type === 1) {
            idName = this.$refs.kuangjiPhone.id;
          } else if (type === 2) {
            idName = this.$refs.powerPhone.id;
          } else if (type === 3) {
            idName = this.$refs.IPFSPhone.id;
          } else if (type === 4) {
            idName = this.$refs.usPhone.id;
          } else if (type === 5) {
            idName = this.$refs.shengtaiPhone.id;
          } else if (type === 0) {
            idName = this.$refs.HomePhone.id;
          }
          if (idName === 'shengtaiPhone') {
            this.resetPhone();
            this.xiongKongisAction_newPhone = true;
          } else if (idName === "kuangjiPhone") {
            this.resetPhone();
            this.kuangjiisAction_newPhone = true;
          } else if (idName === "powerPhone") {
            this.resetPhone();
            this.powerisAction_newPhone = true;
          } else if (idName === "IPFSPhone") {
            this.resetPhone();
            this.IPFSisAction_newPhone = true;
          } else if (idName === "usPhone") {
            this.resetPhone();
            this.usisAction_newPhone = true;
          } else if (idName === "HomePhone") {
            this.resetPhone();
            this.phoneHomeSHow = false;
          }
          if (section) {
            section.scrollIntoView({
              behavior: "smooth",
              block: "start",
            })
          }
          this.phoneDaoHangAll = true;
          this.phoneDaoHangShow = false;
          this.phoneDaoHang = true;
        },
        reset: function () {
          this.xiongKongisAction_new = false;
          this.kuangjiisAction_new = false;
          this.powerisAction_new = false;
          this.IPFSisAction_new = false;
          this.usisAction_new = false;
          this.menuImgAction_new = "./img/icon_主页.png";
        },
        resetPhone: function () {
          this.xiongKongisAction_newPhone = false;
          this.kuangjiisAction_newPhone = false;
          this.powerisAction_newPhone = false;
          this.IPFSisAction_newPhone = false;
          this.usisAction_newPhone = false;
          this.phoneHomeSHow = true;
        },
        getScrollHeight: function () {
          return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        },
        getdivHeight: function (id) {
          return document.getElementById(id).clientHeight
        },
        handleScroll() {
          let height = this.getScrollHeight();
          let t = document.documentElement.scrollTop || document.body.scrollTop;
          let percent = (t / height).toFixed(2);
          let p = parseFloat(percent);
          console.log(p)
          if (p < 0.15) {
            this.reset();
            this.menuImgAction_new = "./img/greenHome.png";
            console.log(this.menuImgAction_new)
          }
          if (0.15 > p > 0.02) {
            this.xiongKongisAction = true;
            this.xiongKongisAction_1 = true;
          }
          if (p > 0.06) {
            this.xiongKongisAction_2 = true;
            this.reset();
            this.xiongKongisAction_new = true;
          }
          if (p > 0.16) {
            this.kuangjiisAction = true;
          }
          if (p > 0.19) {
            this.kuangjiisAction_1 = true;
          }
          if (p > 0.25) {
            this.kuangjiisAction_2 = true;
            this.reset();
            this.kuangjiisAction_new = true;
          }
          if (p > 0.35) {
            this.kuangjiisAction_3 = true;

          }
          if (p >= 0.48) {
            this.powerisAction = true;
            this.reset();
            this.powerisAction_new = true;
          }
          if (p > 0.51) {
            this.powerisAction_1 = true;
          }
          if (p > 0.6) {
            this.IPFSisAction = true;
            this.reset();
            this.IPFSisAction_new = true;
          }
          if (p > 0.65) {
            this.IPFSisAction_1 = true;
          }
          if (p >= 0.82) {
            this.usisAction = true;
            this.reset();
            this.usisAction_new = true;
          }
        },
        ala(section) {
          this.kuangjiisAction_newPhoneID = false;
          section.classList.remove("animated");
        },
        handleScrollPhone() {
          let height = this.getScrollHeight();
          let t = document.documentElement.scrollTop || document.body.scrollTop;
          let percent = (t / height).toFixed(2);
          let p = parseFloat(percent);
          console.log(p)
          // if (p > 0.01) {
          //     this.resetPhone();
          //     this.xiongKongisAction_newPhoneID = true;
          //     this.phoneHomeSHow=false;
          // }
          if (p < 0.04) {
            this.resetPhone()
            this.xiongKongisAction_newPhoneID = true;
            this.phoneHomeSHow = false;
          }
          if (p >= 0.04) {
            this.resetPhone()
            this.xiongKongisAction_newPhone = true;
          }
          if (p > 0.07) {
            let section = document.getElementById("hehe");
            section.addEventListener("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", this.ala(section))
            this.kuangjiisAction_newPhoneID = true;
            section.classList.add("animated")
          }
          if (p > 0.1) {
            this.powerisAction_newPhoneID = true;
          }
          if (p > 0.2) {
            this.powerisAction_newPhoneID_1 = true;
            this.resetPhone()
            this.kuangjiisAction_newPhone = true;
          }
          if (p > 0.28) {
            this.powerisAction_newPhoneID_2 = true;
          }
          if (p > 0.37) {
            this.powerisAction_newPhoneID_3 = true;
          }
          if (p > 0.4) {
            this.powerisAction_newPhoneID_4 = true;

          }
          if (p >= 0.47) {
            this.powerisAction_newPhoneID_5 = true;
          }
          if (p > 0.54) {
            this.powerisAction_newPhoneID_6 = true;
            this.resetPhone()
            this.powerisAction_newPhone = true;
          }
          if (p > 0.61) {
            this.IPFSisAction_newPhoneID = true;
          }
          if (p > 0.64) {
            this.IPFSisAction_newPhoneID_1 = true;
          }
          if (p > 0.72) {
            this.usisAction_newPhoneID = true;
          }
          if (p > 0.74) {
            this.usisAction_newPhoneID_1 = true;
            this.resetPhone()
            this.IPFSisAction_newPhone = true;
          }
          if (p > 0.77) {
            this.usisAction_newPhoneID_2 = true;
            this.resetPhone()
            this.usisAction_newPhone = true;
          }
        },
      },
      mounted() {
        let height = this.getScrollHeight();
        let width = document.body.clientWidth;
        if (width > 1200) {
          window.addEventListener('scroll', this.handleScroll);
        } else {
          window.addEventListener('scroll', this.handleScrollPhone);
        }
      },
      watch: {
        height: function (value) {
          if (value === 50) {
            console.log(this.xiongKongisAction)
          }
        }
      }

    })
  </script>
</body>

</html>